<html>
<head>
<link rel="shortcut icon" href="/favicon.ico">  
<link href='/assets/css/fontstyle.css' rel='stylesheet' type='text/css'>
<!-- Global CSS -->
<link rel="stylesheet" href="/assets/plugins/bootstrap/css/bootstrap.min.css">   
<!-- Plugins CSS -->    
<link rel="stylesheet" href="/assets/plugins/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="/assets/plugins/prism/prism.css">
<link rel="stylesheet" href="/assets/plugins/elegant_font/css/style.css">

<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="/assets/css/styles.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->


</head>
    <body>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-bordered table-striped">
            <tr>
                {% for title in header %}
                <th class="text-center">{{title}}</th>
                {% endfor %}
            </tr>
                {% for student in info %}

                <tr>
                    <td class="text-center">{{student[0]}}</td>

                    {% for grid in student[1:] %}
                            <td class="text-center"><span style="color:{{grid[1]}}">{{grid[0]}}</span></td>
                    {% endfor %}
                </tr>
                {% endfor %}
                        
            </table>

        </div>
    </div>
    </body>
</html>